@value theme-color  #40C4FF;
/**
edit by wxl基本样式
**/
/*===== 清除默认的margin的属性值 =====*/
body,
blockquote,
dd,
dl,
figure,
form,
p,
pre,
h1,
h2,
h3,
h4,
h5,
h6 {margin:0;}
/**
theme-color:#2CC8DC;**/


/*===== 统一设置列表的margin和padding，以及列表表形式 =====*/
menu,
ul,
ol {list-style:none;margin:0;padding:0;}

/*===== 全局定义字体以及页面背景 =====*/
body {line-height:1.5;background-color:#FFFFFF;}
body,h1,h2,h3,h4,h5,h6,input,button,select,textarea {font-size: 18px;} /* 设置字体大小 */
input[type="button"],
input[type="submit"],
input[type="reset"] {font-size: 16px;} /* 设置字体大小，这部分跟前面写在一起，IE6中会无效 */

/*===== 字体控制 =====*/
body,
input,
button,
select,
optgroup,
option,
textarea,
pre {font-family: Arial, Roboto, 'Droid Sans', 'Hiragino Sans GB', 'Microsoft YaHei', 'Simsun', STXihei, 'sans-serif';}

/*===== 设置iframe的背景色以及去除个别浏览器iframe底部的几个像素 =====*/
iframe {background-color:#FFFFFF;vertical-align:middle;}

/*===== 设置文本链接样式 =====*/
a {color:#000000;text-decoration:none;}
a:hover {text-decoration:none;background:#d0d0d0;}

/*===== 去除个别浏览器图片底部的几个像素，以及设置图片形式链接无边框 =====*/
img {vertical-align:middle;}
a img {border:0 none;}

/*===== 设置表单元素的样式 =====*/
fieldset {margin:0;padding:0;}
legend {color:windowtext;} /* 设置表单域部分的字体颜色为系统窗体文本颜色 */
button,
input.ie6 {overflow:visible;padding:.1em .25em;cursor:pointer;} /* 尽量统一按钮的大小，鉴于IE6不支持【属性选择符】，所以使用一个类名来控制 */
input[type="button"],
input[type="submit"],
input[type="reset"] {overflow:visible;padding:.1em .25em;cursor:pointer;} /* 尽量同意按钮的大小，如果采用input方式做的按钮 */
input[type="text"],
select,
textarea {background-color:#FFFFFF;} /* 统一文本输入框、下拉、文本框的背景色，避免被用户设置系统颜色而破坏页面色彩 */
select {border:1px inset;} /* 统一下拉的边框 */
textarea {overflow:auto;vertical-align:text-bottom;border:1px solid;resize:vertical;} /* 滚动条为auto，与周边的元素对齐方式，其中hack部分是IE6&7中vertical-align影响范围清除，resize为上下可拉动，避免左右拉动破坏页面布局，如有需要可以设置为none */

/*===== 设置表格元素的样式 =====*/
table {border-spacing:0;} /* 合并表格的间隙，去掉单元格之间的间距，如有需要合并单元格为细线表格，可增加 border-collapse:collapse; */
td, th, caption {padding:0;} /* 去除单元格以及caption表头的padding值 */
body {
    color: #000;
    background: #fff;
}

.index img {
    margin: 40px auto;
    border-radius: 4px;
    background: #fff;
    display: block;
}

.index .notice {
    margin: 20px auto;
    padding: 15px 0;
    text-align: center;
    border: 1px solid #000;
    border-width: 1px 0;
    background: #666;
}

.header{
    width:100%;
    height:138px;
}

.header-center,.main-body{
    width:1200px;
    margin: 0px auto;
}

.main-body{
    margin-bottom:100px;
}
.header-logo{
    width:100%;
    height:60px;
    display:table;
    position:relative;
}
.nav-logo{
    float:left;
}
.search-box{
    position:absolute;
    bottom:0px;
    right:10px;
    padding:5px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.search-box input{
    border: none;
    outline: none;
    width:600px;
    background-color: rgba(0, 0, 0, 0);
    color: rgba(0, 0, 0, 0.870588);
    cursor: initial;
    font-style: inherit;
    font-variant: inherit;
    font-weight: inherit;
    font-stretch: inherit;
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    height: 100%;
    -webkit-appearance: textfield;
}
.search-box input{
    border-bottom:2px solid theme-color;
}
.search-box button{
    border-style:none;
    margin-left: 10px;
    color: #fff;
    margin-left: 10px;
    background: #40C4FF;
    font-size: 16px;
    height: 40px;
    width: 100px;
    padding: 0px;
    line-height: 40px;
    font-weight: lighter;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
}

.nav,footer{
    width:1200px;
    margin:0px auto;
}

.nav{
    display:-moz-box;
    display:-webkit-box;
    display:flex;
    text-align: center;
    box-shadow: 2px 2px 2px #d0d0d0;
}
.nav li{
    -mozflex:1;
    -webkitflex:1;
    flex:1;
    text-align: center;
    margin: 0 0 0 -1px;
    padding: 0;
    list-style: none;
    font-size: 16px;
    display:flex;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,f6f6f6+100 */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 50%, #f6f6f6 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#f6f6f6 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 50%,#f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */

}
.nav li a{
    flex:1;
    padding:10px;
}
.nav .active{
    background:theme-color;
    color:#fff;
}

footer{
    margin-top:10px;
    text-align: center;
    background:#dff0d8;
    display: table;
}

footer p{
    padding:10px;
}

a {
    outline: 0;
    color: #222;
    font-style:normal
}

div[class$="-ad"]{
    position:relative;
    margin-bottom:10px;
}
div[class$="-ad"]::before{
    content:"广告";
    position:absolute;
    top:0px;
    left:0px;
    padding:3px;
    color:#fff;
    width:28px;
    -webkit-border-radius:1px;
    -moz-border-radius:1px;
    border-radius:1px;
    background: rgba(0,0,0,.5);
    font-size:12px;
}

.card-div{
    padding:5px;
    color: rgba(0, 0, 0, 0.870588); background-color: rgb(255, 255, 255); transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    box-sizing: border-box; font-family: Roboto, sans-serif;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
    border-radius: 2px; z-index: 1;"><div style="padding-bottom: 8px;"><div style="position: relative;
}
.card-div p ,.card-div p img{
    width:100%;
}

.card-div p:nth-child(2),.card-div:nth-child(3){
    margin-top:10px;
}
.cubespinner-div{
    display: table;
    margin-bottom:50px;
}
.detail-bar{
    display:none;
}


.list-left{
    width:870px;
    float:left;
    display:block;
    margin-right:30px;
}
.list-right{
    width:300px;
    float:right;
    display:block;
}


.list-header-ad{
    width:100%;
    height:80px;
    display:block;
    margin:10px auto;
    margin-bottom:20px!important;
}
.list-header-ad img{
    width:100%;
    width:100%;

}

.weatherItem .weatherWrap span{
    padding-top:5px;
}

.showMore{
    margin:10px auto;
    text-align: center;
    width:100%;
    padding:10px;
    color:#fff;
    background:theme-color;
}


.hot-list{
    background:#FAFAFA;
    width:100%;
    -webkit-border-radius: 1px;
    border-radius:1px;
    -moz-border-radius:1px;
}
.hot-title{
    padding:5px;
    border-left:5px solid #40C4FF;
    font-size:18px;
    margin-bottom:10px;
}

.hot-list li{
    height:35px;
    line-height: 35px;
    vertical-align: middle;
}
.hot-list li span:last-child{
    display: inline-block;
}


.hot-list-title::before{
    background:#CBCBCB;
    width:35px;
    padding:5px;
    border-radius:3px;
    height:35px;
    margin-right:10px;
    color:#fff;
    content:attr(name);
}

.hot-list-title-active::before {
    background: theme-color;
}




.hot-list-title{
    width: 280px;
    font-size: 16px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}


.aScroll{
    position:fixed;
    bottom:50px;
    right:20px;
    width:54px;
    height:54px;
    text-align: center;
    line-height: 50px;
    font-size:28px;
    font-weight:bold;
    color:#fff;
    background:theme-color;
    background: url(http://mat1.gtimg.com/news/news2013/img/goTop.png) 100% 0% no-repeat;
}

.aScroll:hover{
    cursor:pointer ;
}


/** detail ***/
.detail-title{
    text-align: center;
    width:100%;
    font-weight:bolder;
}

.detail-subtitle{
    color: #d8d8d8;
    font-size:14px;
}

.detail-content img{
    display:block;
    margin:5px auto;
    width:98%;
}

.header-detail{
    height:60px;
}
.header-center-detail{
    width:100%;
    position:absolute;
    top:0px;
    left:0px;
}

.header-center-detail ul{
    width:100%;
    display:block;
    float:left;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #f6f6f6 100%);
    background: -webkit-linear-gradient(top, #ffffff 0%, #f1f1f1 50%, #f6f6f6 100%);
    background: linear-gradient(to bottom, #ffffff 0%, #f1f1f1 50%, #f6f6f6 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
    z-index:99999;
}

.header-center-detail ul li{
    width:100px;
    float:left;
}

.back-btn{
    display: inline-block; color: rgb(255, 255, 255); fill: rgb(255, 255, 255); height: 24px; width: 24px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; user-select: none;
}

/** detail end **/


@media all and (max-width: 768px) {
    body{
        font-size: 1.125rem!important;
        font-family: "PingFang SC";
        line-height: 1.5em;
        text-size-adjust: none;
        width:100%;
    }
    .nav li a {
        padding: 0px;
    }
    .header{
        height:3.0rem;
    }
    .header-center{
        width:100%;

    }
    .header-center .header-logo{
        display:none;
    }
    .nav, footer{
        width:100%;
    }
    .main-body{
        width:100%;
    }
    .main-body .list-left {
        width: 100%;
        display: block;
    }
    .main-body .list-left img{
        max-width: 100%;
        max-height: 100%;
        display:inline-block;
    }
    .main-body .list-left  .swiper-container {
        clear:both;
        width: 100%!important;
        height: 300px;
    }
    .swiper-wrapper,.swiper-slide{
        width:100%;
    }
    .main-body .list-left .swiper-container a{
        width:100%;
        height:100%;
        object-fit: cover;
    }

    .main-body .list-left .swiper-container a img{
        height:100%;
    }

    .plist .content ul{
        width:98%!important;
        display:flex;
    }

    .home-nav{
        width:97%!important;
    }

    .plist .content .pic{
        flex:1;
        display: inline-block;
    }

    .tpList .tpWrap .text{
        width:90%!important;
    }

    .list-right{
        display:none!important;
    }

    .detail-bottom-ad{
        width:100%!important;
    }
    .detail-bottom-ad img,.list-header-ad img{
        width:100%!important;
        height:100%;
        margin:0px;
    }

    .content em a{
        margin-left:0.3rem;
    }

    .tpWrap{
        width:98%!important;
        margin:0.1rem auto;
    }
    .hide{
        display:none;
    }

    .detail-bar{
        display: block!important;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height: 2.5rem;
        line-height: 2rem;
        padding-top: 0.9rem;
        z-index:9999;
        background:theme-color
    }
    .detail-article {
        margin: 0.5rem 0 0.3rem;
        white-space: normal;
        word-wrap: break-word;
        line-height: 1.5em!important;
        padding:0.5rem;
    }

    .content a,.hot-title,.tpList .tpWrap .text em{
        font-size:0.26rem!important;
    }

    .showMore{
        padding:0px;
        height:2rem;
        line-height: 2rem;
    }

    .detail-content{
        font-size:1rem;
    }

}
